<script setup lang="tsx">
import { ElDialog, ElMessage } from 'element-plus'
import { Table, TableColumn } from '@/components/Table'
import { BaseButton } from '@/components/Button'

import { useTable } from '@/hooks/web/useTable'
import { ref, reactive, unref } from 'vue'
import { getSysLogsLoginDetail, switchIpStatus } from '@/api/user'

//Table
const { tableRegister, tableMethods, tableState } = useTable({
  immediate: false,
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const { data, count } = await getSysLogsLoginDetail({
      pageNo: unref(currentPage),
      pageSize: unref(pageSize),
      serverIp: serverIp.value
    })
    return {
      list: data,
      total: count
    }
  }
})

const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList } = tableMethods

const columns = reactive<TableColumn[]>([
  {
    field: 'index',
    label: '序号',
    type: 'index'
  },
  {
    field: 'username',
    label: '用户名称'
  },
  {
    field: 'parentName',
    label: '所属合伙人'
  },
  {
    field: 'advertisingNum',
    label: '广告次数'
  },
  {
    field: 'action',
    label: '操作',
    width: 200,
    fixed: 'right',
    slots: {
      default: ({ row }) => {
        return row.status == 0 ? (
          <div class="flex justify-center items-center">
            <BaseButton
              v-if="row.status == 1"
              class="!ml-0"
              type="primary"
              size="small"
              onClick={() => switchStatus(row)}
            >
              {{
                default: () => '解封'
              }}
            </BaseButton>
          </div>
        ) : (
          <div class="flex justify-center items-center">
            <BaseButton v-else type="danger" size="small" onClick={() => switchStatus(row)}>
              {{
                default: () => '封禁'
              }}
            </BaseButton>
          </div>
        )
      }
    }
  }
])
const visible = ref()
const serverIp = ref()
async function switchStatus(row) {
  const data = {
    id: row.userId,
    status: row.status == 0 ? 1 : 0
  } as any
  const { code } = await switchIpStatus(data)
  if (code == 0) {
    ElMessage.success('操作成功')
    getList()
  }
}
const openDialog = (row: any) => {
  visible.value = true
  serverIp.value = row.ip
  getList()
}
defineExpose({
  openDialog
})
</script>

<template>
  <ElDialog title="ip详情" v-model="visible">
    <div class="mb3">总数：{{ total }}</div>
    <Table
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      :columns="columns"
      :data="dataList"
      row-key="id"
      :loading="loading"
      sortable
      headerAlign="center"
      align="center"
      :pagination="{
        total: total
      }"
      @register="tableRegister"
    />
  </ElDialog>
</template>
